<template>
    <el-dialog title='添加' :visible.sync="formVisible">
      <el-form :rules="rules" ref="dataForm" :model="addFormData" label-position="left" label-width="70px" style=''>           
       <el-form-item :label="$t('table.banner.id')" prop="id">
          <el-input v-model="addFormData.id"></el-input>
       </el-form-item>           
       <el-form-item :label="$t('table.banner.title')" prop="title">
          <el-input v-model="addFormData.title"></el-input>
       </el-form-item>           
       <el-form-item :label="$t('table.banner.isShow')" prop="isShow">
          <el-input v-model="addFormData.isShow"></el-input>
       </el-form-item>           
       <el-form-item :label="$t('table.banner.index')" prop="index">
          <el-input v-model="addFormData.index"></el-input>
       </el-form-item>           
       <el-form-item :label="$t('table.banner.href')" prop="href">
          <el-input v-model="addFormData.href"></el-input>
       </el-form-item>   
      <el-form-item :label="$t('table.banner.img')" prop="img">
           <Upload v-model="addFormData.img"></Upload>  
      </el-form-item></el-form>    
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{$t('table.cancel')}}</el-button>       
        <el-button type="primary" @click="createHandle">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
</template>
<script>
import { bannerPost } from '@/api/banner'
import Upload from '@/components/Upload/singleImage2'

export default {
  name: 'bannerAddDialog',
  props: ['Visible'],
  components: { Upload },
  data() {
    return {
      formVisible: this.Visible,
      addFormData: {},
      rules: {
        id: [{ required: true, message: 'id is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'change' }],
        isShow: [{ required: true, message: 'isShow is required', trigger: 'change' }],
        index: [{ required: true, message: 'index is required', trigger: 'change' }],
        href: [{ required: true, message: 'href is required', trigger: 'change' }],
        img: [{ required: true, message: 'img is required', trigger: 'change' }]
      }
    }
  },
  methods: {
    createHandle() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.addFormData)
          bannerPost(tempData).then(() => {
            this.$emit('hiddenAddDialog')
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    cancel() {
      this.$emit('hiddenAddDialog')
    }
  },
  watch: {
    Visible(val) {
      this.formVisible = val
    },
    formVisible(val) {
      if (val === false) {
        this.$emit('hiddenAddDialog')
      }
    }
  }
}
</script>

